import React from 'react';
import {connect} from 'dva';
import styles from './Candidateadd.css';
import {Form, Input, Card, Row, Col, Button, Upload, Modal, Icon} from 'antd';
import MainLayout from '../components/layouts/MainLayout';
import  {routerRedux} from  'dva/router';

const FormItem = Form.Item;

class SubjectAddForm extends React.Component {

  state = {
    previewVisible: false,
    previewImage: '',
    fileList: [],
  };

  handleCancel = () => this.setState({previewVisible: false});

  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };

  handleChange = ({fileList}) => {
    console.log(fileList);
    this.setState({fileList});
  };

  handleSubmit = (e) => {
    e.preventDefault();
    const createCandidate = this.props.handleSubmit;
    const fileList = this.state.fileList;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        var images = fileList.map((file) => {
          return file.response.data.url
        });

        console.log(images);

        createCandidate({...values, ...{images: images}});
      }
    });
  };

  render() {
    const {getFieldDecorator} = this.props.form;
    const {previewVisible, previewImage, fileList} = this.state;
    const uploadButton = (
      <div>
        <Icon type="plus"/>
        <div className="ant-upload-text">Upload</div>
      </div>
    );

    return (
      <Form className={styles.normal} onSubmit={this.handleSubmit}>
        <FormItem label="名称">
          {getFieldDecorator('name', {
            rules: [
              {required: true, message: '名称必须填写'}
            ]
          })(
            <Input placeholder="陈长生-鹿晗"/>
          )}
        </FormItem>

        <FormItem label="描述">
          {getFieldDecorator('description', {
            rules: [
              {required: true, message: '描述必须填写'}
            ]
          })(
            <Input type="textarea" placeholder="balabala 关于这个候选对象的描述"/>
          )}
        </FormItem>

        <FormItem label="图片">
          {getFieldDecorator('images', {
            rules: []
          })(
            <div className="clearfix">
              <Upload
                action="//test.api.malatoday.com/image/upload?debug=1"
                listType="picture-card"
                fileList={fileList}
                onPreview={this.handlePreview}
                onChange={this.handleChange}
              >
                {fileList.length >= 3 ? null : uploadButton}
              </Upload>
              <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                <img alt="example" style={{width: '100%'}} src={previewImage}/>
              </Modal>
            </div>
          )}
        </FormItem>

        <FormItem>
          <Button type="primary" htmlType="submit">保存</Button>
        </FormItem>
      </Form>
    );
  }
}

const WrappedSubjectAddForm = Form.create()(SubjectAddForm);

function Candidateadd({dispatch}) {
  function handleSubmit(query) {
    dispatch({
      type: 'candidates/create',
      payload: {
        name: query.name,
        description: query.description,
        images: query.images
      }
    });

    dispatch(routerRedux.push({
      pathname: 'candidates',
      query: {}
    }));
  }

  return (
    <MainLayout>
      <Row>
        <Col span={3}>

        </Col>
        <Col span={18}>
          <Card title="新增候选对象">
            <WrappedSubjectAddForm handleSubmit={handleSubmit}/>
          </Card>
        </Col>
        <Col span={3}>

        </Col>
      </Row>
    </MainLayout>
  );
}

function mapStateToProps() {
  return {};
}

export default connect(mapStateToProps)(Candidateadd);
